CSS hover behavior inconsistent on desktop/mobile devices [migrated]
Posted
by
tbart
on Pro Webmasters
See other posts from Pro Webmasters
or by tbart
Published on 2012-07-09T20:27:25Z
Indexed on
2012/07/09
21:23 UTC
Read the original article
Hit count: 197
I have a strange problem:
This page looks good on desktop browsers, but the hovering effect does not seem to work correctly on at least my CM7 Android 2.3.7 device. I know hovering is not supposed to work on touch displays as it does with a mouse, but I'd like to have touch feedback, i.e. the highlight color should show once the user has tapped a menu item.
This does work when the link is just a href="#" but it does not when it is a real link. I tried all sorts of stuff as you can see, to no avail.
If you go back in the browser history after having tapped a real link, the item is highlighted, so the browser understands the CSS I am throwing at it.
However, the javascript alert makes it clear that it only seems to interpret the link opening action and does not care about the color changing stuff.
Weird that is. Workarounds welcome, preferable without javascript, but if it has to be JS, then go ahead!
either go here: http://orpheus.co.at/hoverprob and Use the source, Luke! or see it here in all its glory:
<html>
<head>
<meta name="viewport" content="width=320">
<style>
#nav, #nav ul {
width: 100%;
float: left;
list-style: none;
line-height: 1;
background: #fff;
font-weight: bold;
padding: 0;
margin: 0 0 5px 0;
}
#nav a {
display: block;
color: #001834;
text-decoration: none;
padding: 5px 7px;
}
#nav li {
float: left;
padding: 0;
width: 33%;
}
#nav li ul {
position: absolute;
left: -9999px;
height: auto;
margin: 0;
opacity: .95;
width: 100%;
}
#nav li a {
text-align: center;
height: 20px;
line-height: 20px;
}
#nav li ul li a {
text-align: left;
}
#nav li ul li {
float: none;
/* width: 316px; */
width: 100%;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -9999px;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: 0;
}
#nav li.educate {
background: #FFF0B8;
/* background: #FF0000; */
/* border-radius: 5px; */
border: 5px;
}
#nav li.educate:hover {
background: #FFCE00;
/* border-radius: 5px; */
}
</style>
</head>
<body>
<div id="mobMenu">
<ul id="nav" class="nav">
<li class="educate"><a href="#">menu</a>
<ul class="educate">
<li class="educate"><a href="#">href="#", works</a></li>
<!--(+emtpy onmouseover for iPose devices)-->
<li class="educate"><a onmouseover="" href="index.html">does not work, real link</a></li>
<li class="educate" id="bla"><a onmousedown="document.getElementById('bla').style.backgroundColor='Blue'; alert('Done');document.location='index.html';" href="#">JS, not interpreted in corr order</a></li>
</ul>
</li>
</div>
</body>
© Pro Webmasters or respective owner
